<template>
  <!--模板-->
    查询控件，演示用
  <hr>
  <br><br><br><br><br><br><br><br><br><br><br><br><br>
  <nf-find
    :queryMini="queryMini"
    :querys="querys"
    v-bind="findMeta"
  >
  </nf-find>
  <hr>
  <el-row :gutter="20">
    <el-col :span="10">
      简洁模式：
      <div
        v-for="(item, key, index) in queryMini"
        :key="index"
      >
        {{key}}： {{item}}
      </div>
    </el-col>
    <el-col :span="14">
      标准模式：
      <div
        v-for="(item, key, index) in querys"
        :key="index"
      >
        {{key}}： {{item}}
      </div>
    </el-col>
  </el-row>
  <hr>
  
</template>

<script lang="ts">
  import { defineComponent, reactive } from 'vue'
  import { nfFind } from '../../../lib/main'
  import _findMeta from './find.json'

  export default defineComponent({
    name: 'nf-ui-elp-find',
    components: {
      nfFind
    },
    props: {
    },
    setup(props, context) {

      // 获取表单控件需要的meta
      const findMeta = reactive(_findMeta)

      // 根据 meta 创建表单的 model
      const queryMini = reactive({})
      const querys = reactive([])

      return {
        findMeta,
        querys,
        queryMini
      }
    }
  })
</script>